
<template>
  <h1>个人中心</h1>
  <div v-for="(weibo, i) in arr" style="width: 500px;height:40px;margin: 0 auto;">
    <!-- 因为都是自己发的,所以不用体现作者的昵称 -->
    <h3 style="float: left;margin: 0;line-height:32px;">{{weibo.content}}</h3>
    <el-button type="danger" style="float: right;" @click="del(weibo.id, i)">删除</el-button>

  </div>
</template>
<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const arr = ref([])

//页面加载完毕立即执行
onMounted(()=>{
  //先获取当前登录的用户id
  let user = localStorage.user ? JSON.parse(localStorage.user) : null;
  axios.get('http://localhost:8080/v1/weibos?userId='+user.id).then((response)=>{
    if (response.data.code==2002){
      arr.value = response.data.data;
      console.log(arr.value)
      //如果数组的长度为0(成功请求但用户自己的微博数为0)
      if (arr.value.length == 0){
        ElMessage.warning('快来发布你的第一条内容吧!');
        router.push('/post');
      }
    }
  })
})

const del = (weiboId, index)=>{
  if (confirm('确认删除吗?')){
    axios.post('http://localhost:8080/v1/weibos/'+ weiboId+'/delete').then((resposne)=>{
      if(resposne.data.code == 2002){
        ElMessage.success('删除成功');
        arr.value.splice(index, 1);

        //如果数组的长度为0(成功请求但用户自己的微博数为0)
        if (arr.value.length == 0){
          ElMessage.warning('快来发布微博吧！')
          router.push('/post')
        }
      }
    })
  }
}
</script>

<style scoped>

</style>